export default {
    props: {
        tag: {
            type: String,
            default: "div",
        },
        gutter: {
            type: Number,
            default: 0,
        },
        type: {
            type: String,
        },
        justify: {
            type: String,
            default: "start",
            // 校验可选值,传递过来的值必须是其中的一项
            validator: (val) => {
                return [
                    "start",
                    "end",
                    "center",
                    "space-around",
                    "space-between",
                ].includes(val);
            },
        },
        align: {
            type: String,
            default: "top",
            validator: (val) => {
                return ["top", "middle", "bottom"].includes(val);
            },
        },
    },
    name: "ELRow",
    data() {
        return {};
    },
    computed: {
        // 因为col组件中使用了gutter,会导致每一行中的每一列有一个左右间距,这里是使用margin来消除每一行
        // 与视口的左右边距
        style() {
            const style = {};
            if (this.gutter) {
                style.marginLeft = -this.gutter / 2 + "px";
                style.marginRight = style.marginLeft;
            }
            return style;
        },
    },
    render(h) {
        // h函数接收三个参数:
        // 参数1:元素的标签类型
        // 参数2:传递给该元素的属性
        // 参数3:子元素
        return h(this.tag, {
            class: [
                'el-row',
                { 'el-row--flex': this.type == 'flex' },
                this.justify !== 'start' && `is-justify-${this.justify}`,
                this.align !== 'top' && `is-align-${this.align}`,
            ],
            style: this.style,
        }, this.$slots.default);
    }
};